.custom-loading {
  position: fixed;
  left: 40%;
  top: 40%;
  z-index: 999;
}
.custom-loading .lines {
  height: 100%;
  color: #999;
  font-size: 0.9rem;
}
.custom-loading .lines .tip {
  margin-left: 0.3rem;
}
.custom-loading .lines span {
  width: 0.2rem;
  height: 0.4rem;
  background-color: #E82202;
  margin-right: 0.2rem;
  border-radius: 0.1rem;
  animation: translate 1.5s infinite linear;
}
.custom-loading .lines .lines-1 {
  animation-delay: 0;
}
.custom-loading .lines .lines-2 {
  animation-delay: 200ms;
}
.custom-loading .lines .lines-3 {
  animation-delay: 0;
}
.custom-loading .lines .lines-4 {
  animation-delay: 600ms;
}
@keyframes translate {
  0% {
    height: 1rem;
  }
  50% {
    height: 0.4rem;
  }
  100% {
    height: 1rem;
  }
}
.custom-loading .dot {
  height: 100%;
  animation-delay: 1s;
}
.custom-loading .dot span {
  position: relative;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #FF3C5C;
  margin: 0.6rem;
}
.custom-loading .dot span:before {
  position: absolute;
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #FF3C5C;
  opacity: 0.7;
  animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
  transition: 0.5s all ease;
  transform: scale(0);
}
.custom-loading .dot .item-1:before {
  animation-delay: 200ms;
}
.custom-loading .dot .item-2:before {
  animation-delay: 400ms;
}
.custom-loading .dot .item-3:before {
  animation-delay: 600ms;
}
.custom-loading .dot .item-4:before {
  animation-delay: 800ms;
}
.custom-loading .dot .item-5:before {
  animation-delay: 1000ms;
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50%,
  75% {
    transform: scale(2);
  }
  78%,
  100% {
    opacity: 0;
  }
}
